<template>
  <div>
    <div class="personnel-emission">
      <el-row>
        <el-col :span="20">
          <h3>电力消耗产生的碳排放</h3>
        </el-col>
        <el-col :span="4">
          <el-button size="small" type="primary" @click="edit" icon="el-icon-check">保存修改</el-button>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <div class="input-group">
            <span class="label">年均用电消耗量</span>
            <el-input-number
              v-model="formData.avgElectricity"
              size="small"
              :min="0"
              :precision="2"
              :controls="false"
              placeholder="请输入"
            />
          </div>
        </el-col>

        <el-col :span="6">
          <div class="input-group">
            <span class="label">工程设计年限</span>
            <el-input-number
              v-model="formData.designLife"
              size="small"
              :min="0"
              :precision="2"
              :controls="false"
              placeholder="请输入"
            />
          </div>
        </el-col>

        <el-col :span="6">
          <div class="input-group">
            <span class="label">电网碳排放因子</span>
            <el-input-number
              v-model="formData.gridCarbonFactor"
              size="small"
              :min="0"
              :precision="2"
              :controls="false"
              placeholder="请输入"
            />
          </div>
        </el-col>

        <el-col :span="6">
          <div class="input-group">
            <span class="label">碳排放量</span>
            <el-input
              :value="powerTotalEmission"
              size="small"
              disabled
              placeholder="计算结果"
            />
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="personnel-emission">
      <el-row>
        <el-col :span="20">
          <h3>车辆行驶碳排放</h3>
        </el-col>
        <el-col :span="4">
          <el-button size="small" type="primary" @click="edit" icon="el-icon-check">保存修改</el-button>
        </el-col>
      </el-row>

      <el-row :gutter="20">

        <el-col :span="4">
          <div class="input-group">
            <span class="label">工程里程长度</span>
            <el-input-number
              :value="mileage"
              size="small"
              disabled
              :min="0"
              :precision="2"
              :controls="false"
              placeholder="请输入"
            />
          </div>
        </el-col>

        <el-col :span="4">
          <div class="input-group">
            <span class="label">工程设计年限</span>
            <el-input-number
              :value="serviceLife"
              size="small"
              disabled
              :min="0"
              :precision="2"
              :controls="false"
              placeholder="请输入"
            />
          </div>
        </el-col>

        <el-col :span="4">
          <div class="input-group">
            <span class="label">初始年日交通量</span>
            <el-input-number
              v-model="formData.initialDailyTraffic"
              size="small"
              :min="0"
              :precision="2"
              :controls="false"
              placeholder="请输入"
            />
          </div>
        </el-col>

        <el-col :span="4">
          <div class="input-group">
            <span class="label">单位距离碳排放因子</span>
            <el-input-number
              v-model="formData.vehicleEmissionFactor"
              size="small"
              :min="0"
              :precision="2"
              :controls="false"
              placeholder="请输入"
            />
          </div>
        </el-col>

        <el-col :span="4">
          <div class="input-group">
            <span class="label">车辆交通变化率</span>
            <el-input-number
              v-model="formData.trafficGrowthRate"
              size="small"
              :min="-100"
              :max="100"
              :precision="2"
              :controls="false"
              placeholder="请输入"
            />
          </div>
        </el-col>

        <el-col :span="4">
          <div class="input-group">
            <span class="label">车辆行驶碳排放量</span>
            <el-input
              :value="carTotalEmission"
              size="small"
              disabled
              placeholder="计算结果"
            />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { updateOperationPhase } from "@/api/business/operationPhase"

export default {
  props: {
    carData: {
      type: Object,
      default: () => ({
        avgElectricity: 0,
        designLife: 0,
        gridCarbonFactor: 0,

        initialDailyTraffic: 0,
        vehicleEmissionFactor: 0,
        trafficGrowthRate: 0,
      })
    },
    projectId: {
      required: false,
      type: Number
    },
    engineeringId: {
      required: false,
      type: Number
    },
    usagePhase: {
      type: String,
      default: ""
    },

    mileage: {
      type: Number,
    },
    serviceLife: {
      type: Number,
    },
  },

  data() {
    return {
      formData: { ...this.carData }
    }
  },

  computed: {
    powerTotalEmission() {
      const { avgElectricity, designLife, gridCarbonFactor } = this.formData
      return (avgElectricity * designLife * gridCarbonFactor).toFixed(2)
    },
    carTotalEmission() {
      const { initialDailyTraffic, vehicleEmissionFactor, trafficGrowthRate } = this.formData
      let result = 0
      if (trafficGrowthRate === 0) {
        result = result + this.serviceLife
          * 365 * this.mileage * initialDailyTraffic * vehicleEmissionFactor
      } else {
        result = result + (((1 + trafficGrowthRate) ** this.serviceLife - 1 ) / trafficGrowthRate)
          * 365 * this.mileage * initialDailyTraffic * vehicleEmissionFactor
      }
      return result.toFixed(2)
    }
  },

  watch: {
    carData: {
      deep: true,
      handler(newVal) {
        this.formData = { ...newVal };
      }
    },
  },

  methods: {
    edit() {
      this.formData['projectId'] = this.projectId
      this.formData['usagePhase'] = this.usagePhase
      this.formData['engineeringId'] = this.engineeringId
      updateOperationPhase(this.formData.operationId ? this.formData.operationId : 0, this.formData).then((res) => {
        this.formData.operationId = res.data
        this.$emit("updateCarData", this.formData)
        this.$modal.msgSuccess("修改成功")
      })
    }
  }
}
</script>

<style scoped>
.personnel-emission {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 25px;
}

h3 {
  margin-bottom: 20px;
}

.input-group {
  display: flex;
  flex-direction: column;
}

.label {
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
}
</style>
